<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" href="layout/jquery-ui-2/menu.css" rel="stylesheet" />
<link href="layout/jquery-ui-1/css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" >
<link type="text/css" href="layout/my.css" rel="stylesheet" />

<script type="text/javascript" src="layout/jquery-ui-1/js/jquery-1.6.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="layout/jquery-ui-1/js/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="layout/jquery-ui-2/menu.js"></script>

<script>
	function request(addr) {
		$("#result-1").hide();
		$("#result-2").hide();
		$("#result-3").hide();
		$("#loader").show();
		$("#loader").html("<img src='/TestClient/images/ajax-loader.gif' />");
		var action = "getByAddress"; 
		$.ajax({
			  type: 'POST',
			  url: "/TestClient/result",
			  data: {
				  "address": addr,
				  "action" : action
			  },
			  success: function(data) {
					var temp = addr.split(",");	
					$("#street").val(temp[0]);
					$("#zip").val(temp[1]);
					$("#town").val(temp[2]);
					$("#country").val(temp[3]);
					
				  if(data.statusCode == 1){
					$("#venues-table").html("");
				  	$("#weatherStatus").html("The weather is " + data.weatherStatus);
				  	if(data.weatherStatus == "cloudy") $("#weatherImage").html("<img src='/TestClient/images/cloudy.png' width = '150p'/>");
				  	else if(data.weatherStatus == "sunny") $("#weatherImage").html("<img src='/TestClient/images/sunny.png' width = '150p'/>");
				  	else if(data.weatherStatus == "clear") $("#weatherImage").html("<img src='/TestClient/images/sunny.png' width = '150p'/>");
				  	else if(data.weatherStatus == "rainy") $("#weatherImage").html("<img src='/TestClient/images/rainy.png' width = '150p'/>");
				  	else if(data.weatherStatus == "snowy") $("#weatherImage").html("<img src='/TestClient/images/snowy.png' width = '150p'/>");
				  	else if(data.weatherStatus == "stormy") $("#weatherImage").html("<img src='/TestClient/images/stormy.png' width = '150p'/>");
				  	
				  	$("#msg-1").html(data.msg);
				  	if(data.POIs != ""){
					  var html = "<ul><label >Suggested points of interest:</label><br/><br/>";
					  $.each(data.POIs, function(idx, el) {
						  html = html + "<li><a>" + el + "</a><br/></li>";
					  });
					  html = html + "</ul>";
					  $("#venues-table").html(html);
				  	}
				  	$("#result-3").hide();
				  	$("#result-2").hide();
				  	$("#loader").hide();
				  	$("#result-1").show();
				  }
				  if(data.statusCode == -1){
					  $("#msg-2").html(data.msg);
					  $("#result-1").hide();
					  $("#result-3").hide();
					  $("#loader").hide();
					  $("#result-2").show();
				  }
				  if(data.statusCode == -2){
					  $("#addr-table").html("");
					  var html = "<ul>";
					  $.each(data.addr, function(idx, el) {
						  html = html + "<li><a class='link' href='#'>" + el + "</a><br/></li>";
					  });					  
					  html = html + "</ul>";
					  
					  $("#addr-table").html(html);
					  $("#msg-3").html(data.msg);
					  $("#result-1").hide();
					  $("#result-2").hide();
					  $("#loader").hide();
					  $("#result-3").show();
					  
					  $(".link").click(function(event) {
						  	var addr = event.target.innerHTML;
						  	request(addr);
							return false;
						});
				  }
			  },
			  failure: function (data) {
				  alert("failure");		
			  }
			});
			return false;
	}
	$(function() {
		$("#submit-btn").button();
		$("#first span.bg").addClass("ui-corner-tl");
		$("#menu").css("position", "relative");
		$("#menu").css("top", "55px");
		$("#address-form").submit(function() {
			
			  var addr =  $(this['Street']).val() + ',' + 
			  $(this['ZIP']).val() + ',' +
			  	 $(this['Town']).val() + ',' +
			  	 $(this['Country']).val();
			  request(addr);
				return false;
			});

	});
</script>	

<title>How's the weather</title>
</head>
<body style='background-image: url("images/sky.jpg"); z-index: 0;'>
	<div id="div-wrapper">
		<t:myNavigation/>
		<div id='div-main'>
			<div id='div-content'>
				<t:addressDiv/>		
				<t:proposalResult/>
			</div>
		</div>
		<a href="http://apycom.com/" style="visibility:none;"></a>
	</div>
</body>
</html>
